<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>001_dom查询</title>
</head>
<body>

    <!--
        获取元素节点：通过document对象调用：
            getElementById();
            getElementsByTagName()通过标签名获取一组元素节点对象
            getElementsByName() 通过name属性获取一组元素节点对象

        获取元素的子节点：通过具体的元素节点调用
            getElementsByTagName()  返回当前节点的指定标签名后代节点
            childNodes 表示当前节点的所有子节点：会获取到包括文本节点在内的所有节点，根据DOM标签标签间空白也会当成文本节点，但是在IE8以及以下的浏览器中，不会将空白当成子节点。
            children属性可以获取当前元素的所有子元素

            firstChild 表示当前节点的第一个子节点
            lastChild表示当前节点的最后一个子节点

        获取父节点和兄弟节点：
            parentNode：表示当前节点的父节点
            previousSibling：表示当前节点的前一个兄弟节点
            nextSibling：表示当前节点的后一个兄弟节点


       获取body标签
       var body = document.body;

       保存的是html根标签
       var html = document.documentElement;

       代表页面中所有的元素
       var all = document.all

       根据元素的class属性查询一组元素节点对象：getElementsByClassName(),但是该方法不支持IE8以下的浏览器。

       document.querySelector(): 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象

       var div = document.querySelector(".box1 div");
       console.log(div.innerHTML);
       使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。
       querySelectorAll()
    -->
</body>
</html>